<template>
  <table width="100%" class="cartTable" cellspacing="0" cellpadding="10px">
    <!-- 首行 -->
    <tr class="title">
      <td width="50"><input type="checkbox" name="" class="choose_all" v-model="checkALL"></td>
      <td width="100" class=""><span style="margin-left: -10px;">全选</span></td>
      <td width="400">商品信息</td>
      <td width="150">单价（元）</td>
      <td width="150">数量</td>
      <td width="150">金额（元）</td>
      <td width="80">操作</td>
    </tr>

    <!-- 商品具体信息 -->
    <tr class="row" v-for="item in list" :key="item.id">
      <td><input v-model="item.isSelected" type="checkbox" name="" class="choose"></td>
      <td class="tal"><a href="#" class="pic"><img :src="item.img" alt=""></a>
      </td>
      <td class="tal"><a href="#">{{ item.name }}</a></td>
      <td>
        <del class="tdl">{{ item.oldPrice }}</del>
        <br>
        <b class="unit">{{ item.price }}</b>
      </td>
      <td>
        <div class="amount">
          <a href="#" class="Increase" @click.prevent="item.count = (item.count || 0) + 1">+</a>
          <input type="text" value="1" class="unum">
          <a href="#" class="Reduce" @click.prevent="item.count = (item.count || 0) > 0 ? item.count - 1 : 0">-</a>
        </div>
      </td>
      <td><b class="u-price">{{ item.price * item.count }}</b></td>
      <td><a href="#" class="btn-del" @click="delBth(item.id)">删除</a></td>
    </tr>
    <tr class="count">
      <td colspan="7">
        <div class="jiesuan clearfix">
          <div class="left fl">
            <p><input type="checkbox" name="" class="choose_all" v-model="checkALL"> 全选&nbsp;&nbsp;&nbsp;
              <a href="#" class="del_check" @click="SanChu">删除选中商品</a>
            </p>
          </div>
          <div class="right fr clearfix">
            <p>商品总计：￥{{ totalprice }}</p>
            <p>活动优惠：-￥0</p>
            <p>已选商品<span class="red t-number"> 0</span>件 总价(不含运费、税费)：
              <span class="red t-price">￥0</span>
            </p>
            <!-- <div><a href="#" class="btn pay">结算</a></div> -->
            <a href="#" class="btn pay fr">结算</a>
          </div>
        </div>
      </td>
    </tr>
  </table>
</template>
<script>
export default {
  props: {
    list: Array,
    // totalprice: Number
  },
  computed: {
    checkALL: {
      get () {
        return this.list.every((item) => item.isSelected)
      },
      set () {
        this.list.forEach((item) => item.isSelected === true)
      }
    },
    totalprice () {
      const newArr = this.list.filter((item) => item.isSelected === true)
      return newArr.reduce((pre, item) => {
        return pre + item.count * item.price
      }, 0)
    }
  },
  methods: {
    delBth (id) {
      this.$emit("delBtn", id)
    },
    SanChu () {
      this.$emit("SanChu")
    },

  }
};
</script>